<template>
  <view>
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap">
      <view class="uni-title">分享内容</view>
      <view class="uni-textarea">
        <textarea class="textarea" v-model="shareText" />
      </view>
      <view class="uni-title">分享图片：</view>
      <view class="uni-uploader" style="padding: 15rpx; background: #fff">
        <view
          class="uni-uploader__input-box"
          v-if="!image"
          @tap="chooseImage"
        ></view>
        <image class="uni-uploader__img" v-if="image" :src="image"></image>
      </view>
      <!-- #ifdef APP-PLUS -->
      <view class="uni-title">分享类型：</view>
      <view>
        <radio-group @change="radioChange">
          <label class="radio"> <radio value="1" checked="true" />文字 </label>
          <label class="radio"> <radio value="2" />图片 </label>
          <label class="radio"> <radio value="0" />图文 </label>
          <label class="radio"> <radio value="5" />小程序 </label>
        </radio-group>
      </view>
      <view class="uni-btn-v uni-common-mt" v-if="providerList.length > 0">
        <block v-for="(value, index) in providerList" :key="index">
          <button
            type="primary"
            v-if="value"
            :disabled="isDisableButton(value)"
            @tap="share(value)"
          >
            {{ value.name }}
          </button>
        </block>
      </view>
      <!-- #endif -->
      <!-- #ifdef MP || QUICKAPP-WEBVIEW -->
      <view class="uni-btn-v uni-common-mt">
        <button type="primary" open-type="share">分享</button>
      </view>
      <!-- #endif -->
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        title: "share",
        shareText: "uni-app可以同时发布成原生App、小程序、H5，邀请你一起体验！",
        href: "https://uniapp.dcloud.io",
        image: "",
        shareType: 1,
        providerList: [],
      };
    },
    computed: {
      isDisableButton() {
        return function (item) {
          if (this.shareType === 0 && item.id === "qq") {
            return true;
          }
          if (this.shareType === 5 && item.name !== "分享到微信好友") {
            return true;
          }
          return false;
        };
      },
    },
    onShareAppMessage() {
      return {
        title: this.shareText ? this.shareText : "欢迎体验uni-app",
        path: "/pages/tabBar/component/component",
        imageUrl: this.image
          ? this.image
          : "https://web-assets.dcloud.net.cn/unidoc/zh/share-logo@3.png",
      };
    },
    onUnload: function () {
      (this.shareText =
        "uni-app可以同时发布成原生App、小程序、H5，邀请你一起体验！"),
        (this.href = "https://uniapp.dcloud.io"),
        (this.image = "");
    },
    onLoad: function () {
      uni.getProvider({
        service: "share",
        success: (e) => {
          console.log("success", e);
          let data = [];
          for (let i = 0; i < e.provider.length; i++) {
            switch (e.provider[i]) {
              case "weixin":
                data.push({
                  name: "分享到微信好友",
                  id: "weixin",
                  sort: 0,
                });
                data.push({
                  name: "分享到微信朋友圈",
                  id: "weixin",
                  type: "WXSenceTimeline",
                  sort: 1,
                });
                break;
              case "sinaweibo":
                data.push({
                  name: "分享到新浪微博",
                  id: "sinaweibo",
                  sort: 2,
                });
                break;
              case "qq":
                data.push({
                  name: "分享到QQ",
                  id: "qq",
                  sort: 3,
                });
                break;
              default:
                break;
            }
          }
          this.providerList = data.sort((x, y) => {
            return x.sort - y.sort;
          });
        },
        fail: (e) => {
          console.log("获取分享通道失败", e);
          uni.showModal({
            content: "获取分享通道失败",
            showCancel: false,
          });
        },
      });
    },
    methods: {
      async share(e) {
        console.log("分享通道:" + e.id + "； 分享类型:" + this.shareType);

        if (!this.shareText && (this.shareType === 1 || this.shareType === 0)) {
          uni.showModal({
            content: "分享内容不能为空",
            showCancel: false,
          });
          return;
        }

        if (!this.image && (this.shareType === 2 || this.shareType === 0)) {
          uni.showModal({
            content: "分享图片不能为空",
            showCancel: false,
          });
          return;
        }

        let shareOPtions = {
          provider: e.id,
          scene:
            e.type && e.type === "WXSceneTimeline"
              ? "WXSceneTimeline"
              : "WXSceneSession", //WXSceneSession”分享到聊天界面，“WXSceneTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏
          type: this.shareType,
          success: (e) => {
            console.log("success", e);
            uni.showModal({
              content: "已分享",
              showCancel: false,
            });
          },
          fail: (e) => {
            console.log("fail", e);
            uni.showModal({
              content: e.errMsg,
              showCancel: false,
            });
          },
          complete: function () {
            console.log("分享操作结束!");
          },
        };

        switch (this.shareType) {
          case 0:
            shareOPtions.summary = this.shareText;
            shareOPtions.imageUrl = this.image;
            shareOPtions.title = "欢迎体验uniapp";
            shareOPtions.href = "https://uniapp.dcloud.io";
            break;
          case 1:
            shareOPtions.summary = this.shareText;
            break;
          case 2:
            shareOPtions.imageUrl = this.image;
            break;
          case 5:
            shareOPtions.imageUrl = this.image
              ? this.image
              : "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b6304f00-5168-11eb-bd01-97bc1429a9ff.png";
            shareOPtions.title = "欢迎体验uniapp";
            shareOPtions.miniProgram = {
              id: "gh_33446d7f7a26",
              path: "/pages/tabBar/component/component",
              webUrl: "https://uniapp.dcloud.io",
              type: 0,
            };
            break;
          default:
            break;
        }

        if (shareOPtions.type === 0 && plus.os.name === "iOS") {
          //如果是图文分享，且是ios平台，则压缩图片
          shareOPtions.imageUrl = await this.compress();
        }
        if (shareOPtions.type === 1 && shareOPtions.provider === "qq") {
          //如果是分享文字到qq，则必须加上href和title
          shareOPtions.href = "https://uniapp.dcloud.io";
          shareOPtions.title = "欢迎体验uniapp";
        }
        uni.share(shareOPtions);
      },
      radioChange(e) {
        console.log("type:" + e.detail.value);
        this.shareType = parseInt(e.detail.value);
      },
      chooseImage() {
        uni.chooseImage({
          count: 1,
          sourceType: ["album", "camera"],
          sizeType: ["compressed", "original"],
          success: (res) => {
            this.image = res.tempFilePaths[0];
          },
          fail: (err) => {
            // #ifdef MP
            uni.getSetting({
              success: (res) => {
                let authStatus =
                  res.authSetting["scope.album"] &&
                  res.authSetting["scope.camera"];
                if (!authStatus) {
                  uni.showModal({
                    title: "授权失败",
                    content:
                      "Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限",
                    success: (res) => {
                      if (res.confirm) {
                        uni.openSetting();
                      }
                    },
                  });
                }
              },
            });
            // #endif
          },
        });
      },
      compress() {
        //压缩图片 图文分享要求分享图片大小不能超过20Kb
        console.log("开始压缩");
        let img = this.image;
        return new Promise((res) => {
          var localPath = plus.io.convertAbsoluteFileSystem(
            img.replace("file://", "")
          );
          console.log("after" + localPath);
          // 压缩size
          plus.io.resolveLocalFileSystemURL(
            localPath,
            (entry) => {
              entry.file((file) => {
                // 可通过entry对象操作图片
                console.log("getFile:" + JSON.stringify(file));
                if (file.size > 20480) {
                  // 压缩后size 大于20Kb
                  plus.zip.compressImage(
                    {
                      src: img,
                      dst: img
                        .replace(".jpg", "2222.jpg")
                        .replace(".JPG", "2222.JPG"),
                      width: "10%",
                      height: "10%",
                      quality: 1,
                      overwrite: true,
                    },
                    (event) => {
                      console.log("success zip****" + event.size);
                      let newImg = img
                        .replace(".jpg", "2222.jpg")
                        .replace(".JPG", "2222.JPG");
                      res(newImg);
                    },
                    function (error) {
                      uni.showModal({
                        content: "分享图片太大,需要请重新选择图片!",
                        showCancel: false,
                      });
                    }
                  );
                }
              });
            },
            (e) => {
              console.log("Resolve file URL failed: " + e.message);
              uni.showModal({
                content: "分享图片太大,需要请重新选择图片!",
                showCancel: false,
              });
            }
          );
        });
      },
    },
  };
</script>

<style></style>
